<template>
  <div class="home-page-header">
    <!-- 背景图片 -->
    <img src="@/assets/home_back.jpg" class="home-back" />
    <!-- 搜索框 -->
    <div class="search-warp">
      <h1>心静即声淡，其间无古今</h1>
      <n-input-group>
        <n-input placeholder v-model:value="search_key" @keydown.enter.native="search"></n-input>
        <n-button color="#333333" @click="search">搜索</n-button>
      </n-input-group>
    </div>
    <!-- 数据统计 -->
    <div class="statistic-warp">
      <n-icon>
        <book-icon />
      </n-icon>
      学术论文&emsp;{{ countFormat(statistic_data.paper_count) }}
      <n-divider vertical />
      <n-icon>
        <elec-icon />
      </n-icon>
      期刊/会议&emsp;{{ countFormat(statistic_data.venue_count) }}
      <n-divider vertical />
      <n-icon>
        <person-icon />
      </n-icon>
      学者&emsp;{{ countFormat(statistic_data.author_count) }}
      <n-divider vertical />
      <n-icon>
        <account-icon />
      </n-icon>
      机构&emsp;{{ countFormat(statistic_data.org_count) }}
    </div>
  </div>
  <!-- 热门信息 -->
  <div class="home-page-hot">
    <!-- 热门论文 -->
    <div class="hot-warp" style="width: 30%">
      <div>
        <n-h3 prefix="bar" style="--bar-color:#666666">
          <n-text :strong="true" class="hot-title">热门论文</n-text>
        </n-h3>
      </div>
      <div v-if="is_loading">
        <n-skeleton text :repeat="2" />
        <n-skeleton text style="width: 60%;" />
      </div>
      <div v-for="(item, index) in hot_paper" :key="'hot_paper' + index">
        <!-- 论文标题 -->
        <n-ellipsis line-clamp="1" :tooltip="false">
          <n-text
            @click="toPaper(item.id)"
            style="font-size: medium;"
          >{{ (index + 1) + '.' + item.title }}</n-text>
        </n-ellipsis>
      </div>
    </div>
    <!-- 热门学者 -->
    <div class="hot-warp" style="width: 20%">
      <div>
        <n-h3 prefix="bar" style="--bar-color:#666666">
          <n-text :strong="true" class="hot-title">热门学者</n-text>
        </n-h3>
      </div>
      <div v-if="is_loading">
        <n-skeleton text :repeat="2" />
        <n-skeleton text style="width: 60%;" />
      </div>
      <div v-for="(item, index) in hot_author" :key="'hot_author' + index">
        <n-ellipsis line-clamp="1" :tooltip="false">
          <n-text
            @click="toAuthor(item.id)"
            style="font-size: medium;"
          >{{ (index + 1) + '.' + item.name }}</n-text>
        </n-ellipsis>
      </div>
    </div>
    <!-- 热门关键词 -->
    <div class="hot-warp" style="width: 20%">
      <div>
        <n-h3 prefix="bar" style="--bar-color:#666666">
          <n-text :strong="true" class="hot-title">热门关键词</n-text>
        </n-h3>
      </div>
      <div v-if="is_loading">
        <n-skeleton text :repeat="2" />
        <n-skeleton text style="width: 60%;" />
      </div>
      <div v-for="(item, index) in hot_key" :key="'hot_key' + index">
        <n-ellipsis line-clamp="1" :tooltip="false">
          <n-text style="font-size: medium;" @click="toSearch(item)">{{ (index + 1) + '.' + item }}</n-text>
        </n-ellipsis>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { LogoElectron as ElecIcon } from '@vicons/ionicons5'
import { BookFilled as BookIcon, PersonFilled as PersonIcon, AccountBalanceFilled as AccountIcon } from '@vicons/material'
import { useMessage } from 'naive-ui'
import { getCurrentInstance, ref, onMounted, Ref } from "vue";
import { useRouter } from 'vue-router';

// api访问代理
const { proxy } = getCurrentInstance() as any

// 引入消息函数
const message = useMessage()

// 引入路由
const router = useRouter()

const is_loading = ref(true)

// 统计数据
const statistic_data = ref({
  paper_count: 0,
  venue_count: 0,
  author_count: 0,
  org_count: 0
})

interface IHot {
  id: string,
  name?: string,
  title?: string,
}

// 热门论文
const hot_paper: Ref<IHot[]> = ref([])

// 热门作者
const hot_author: Ref<IHot[]> = ref([])

// 热门关键词
const hot_key = ref([])


onMounted(() => {
  // 获取统计数据
  getStatistic()
  // 获取热门信息
  getHotinfo()
})

// 获取统计数据
const getStatistic = (() => {
  proxy.$api.common.statistic().then((result: any) => {
    if (result.success) {
      statistic_data.value = result.statistic_data
    } else {
      message.warning(result.msg)
    }
  }).catch(() => {
    message.error('未知错误')
  });
})

// 获取热门数据
const getHotinfo = (() => {
  proxy.$api.common.hotinfo().then((result: any) => {
    if (result.success) {
      is_loading.value = false
      hot_paper.value = result.hot_paper
      hot_author.value = result.hot_author
      hot_key.value = result.hot_key
    } else {
      message.warning(result.msg)
    }
  }).catch(() => {
    message.error('未知错误')
  });
})

// 数字格式化
const countFormat = ((_num: number) => {
  var num = (_num || 0).toString()
  var result = '';
  while (num.length > 3) {
    result = ',' + num.slice(-3) + result;
    num = num.slice(0, num.length - 3);
  }
  if (num) { result = num + result; }
  return result;
})

// 跳转至论文简介
const toPaper = ((id: string) => {
  if (id === "") {
    message.warning("十分抱歉，该论文暂未收录")
    return
  }
  router.push({ name: 'PaperIntro', params: { id: id } })
})

// 跳转至学者页
const toAuthor = ((id: string) => {
  if (id === "") {
    message.warning("十分抱歉，该学者暂未收录")
    return
  }
  router.push({ name: 'Author', params: { id: id } })
})

// 跳转至搜索页
const toSearch = ((key: string) => {
  router.push({ path: '/search/result', query: { key: key } })
})

// 搜素关键词
const search_key = ref('')

// 搜索
const search = (() => {
  if (search_key.value === '') {
    message.warning("请输入搜索关键词")
    return
  }
  router.push({ path: '/search/result', query: { key: search_key.value } })
})

</script>

<style scoped>
.home-page-header {
  width: 100%;
}

.home-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 370px;
  -o-object-fit: cover;
  object-fit: cover;
}

.search-warp {
  color: white;
  position: absolute;
  height: 200px;
  width: 700px;
  left: 200px;
  top: 30px;
}

.search-warp h1 {
  font-size: 40px;
}

.search-warp a {
  color: white;
  text-decoration: none;
  float: right;
  margin-top: 10px;
  margin-right: 10px;
}

.search-warp :deep(.n-input) {
  height: 50px;
  font-size: 16px;
  line-height: 50px;
  border-radius: 4px;
  opacity: 90%;
}

.search-warp :deep(.n-button) {
  height: 50px;
  font-size: large;
  border-radius: 4px;
  opacity: 90%;
}

.statistic-warp {
  color: white;
  position: absolute;
  height: 50px;
  width: 100%;
  top: 320px;
  line-height: 50px;
  font-size: large;
  text-align: center;
  background-color: rgba(21, 21, 21, 0.5);
}

.home-page-hot {
  margin: 400px 5% 50px 5%;
  display: flex;
}

.hot-warp {
  background-color: white;
  border-top: 3px solid #666;
  height: 55%;
  padding: 20px;
  margin-left: 5%;
  box-shadow: 0 8px 6px hsl(0deg 0% 78% / 50%);
}

.hot-warp :deep(.n-ellipsis) {
  cursor: pointer;
}

.hot-paper-author {
  color: #666;
  font-size: 6px;
}
</style>